import { useState } from "react"
import { Button, StyleSheet, View } from "react-native"
import { Text, TextInput } from "react-native-paper"

export default function Login({navigation}){
    const [username, setUsername] = useState("")
    const [password, setPassword] = useState("")
    const [passwordVisiable, setPasswordVisiable] = useState(false)


    return (
        <View 
        style={{flexDirection:"column"}}
        >
            <View style={styles.container}>
                <Text style={styles.text}>MY RN APP</Text>
                <TextInput placeholder="请输入用户名" label={'用户名'} value={username} onChangeText={(e)=>{setUsername(e)}} mode="outlined" />
                <TextInput placeholder="请输入密码" label={'密码'} value={password} 
                secureTextEntry={passwordVisiable} right={<TextInput.Icon 
                    name={passwordVisiable ? "eye-off" : "eye"} 
                    color={"black"}
                    onPress={() => setPasswordVisiable(!passwordVisiable)} />}
                onChangeText={(e)=>{setPassword(e)}} mode="outlined" />
                <View style={{ flexDirection: "row", justifyContent: "space-between" }}>
                    <Text>注册用户</Text>
                    <Text >忘记密码</Text>
                </View>
                {/* <Button mode="contained" onPress={()=> console.log('run..') } >登录</Button> */}
                    {/* <Button title="Go flex" onPress={()=> navigation.navigate('Flex')}/> */}
                    {/* <Button title="Go TabNavigation" onPress={()=> navigation.navigate('TabNavigation')}/> */}
                    <Button title="登录" onPress={()=> navigation.navigate('Home')}/>
            </View>
        </View>
    )
}



const styles = StyleSheet.create({
    container: {
        marginTop: 20,
        padding: 20,
        // columnGap: 100,
        rowGap:8
    },
    text: {
        fontSize: 30,
        height:70,
        marginTop:70,
        justifyContent:"center",
    }

});

